<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 
        charset属性定义了HTML文档的字符编码，
        UTF-8是一种通用的字符编码，支持几乎所有语言的字符
    -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 
        viewport元标签用于控制移动设备上的页面显示，
        width=device-width: 使页面宽度等于设备宽度
        initial-scale=1.0: 设置初始缩放比例为1:1
        这对于响应式设计至关重要，确保移动设备正确显示页面
    -->

    <meta name="description" content="这是一个展示HTML元数据标签用法的示例页面，详细说明了各种meta标签的作用。">
    <!-- 
        description元标签提供了页面内容的简短描述，
        搜索引擎通常会在搜索结果中显示这段描述，
        有助于提高SEO和用户点击率
    -->

    <meta name="keywords" content="HTML, 元数据, meta标签, SEO, 网页开发">
    <!-- 
        keywords元标签指定了页面的关键字，
        虽然现代搜索引擎对其权重降低，但仍有助于理解页面主题
    -->

    <meta name="author" content="豆包编程助手">
    <!-- author元标签标识了页面的作者信息 -->

    <meta name="robots" content="index, follow">
    <!-- 
        robots元标签告诉搜索引擎爬虫如何处理页面，
        index: 允许索引此页面
        follow: 允许跟踪此页面上的链接
        其他常见值: noindex, nofollow
    -->

    <meta name="generator" content="Visual Studio Code">
    <!-- generator元标签说明创建此页面所用的工具或软件 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 
        X-UA-Compatible元标签用于告诉IE浏览器以最新模式渲染页面，
        IE=edge表示使用IE的最新版本渲染
    -->

    <meta http-equiv="refresh" content="30">
    <!-- 
        refresh元标签指定页面自动刷新的时间间隔，
        content="30"表示每30秒自动刷新一次
        也可用于自动跳转: content="5;url=https://example.com" 表示5秒后跳转到指定URL
    -->

    <!-- Open Graph (og)元标签：优化社交媒体分享 -->
    <meta property="og:title" content="HTML元数据标签示例">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://example.com/meta-tags">
    <meta property="og:image" content="https://picsum.photos/400/300?random=1">
    <meta property="og:description" content="学习HTML元数据标签的使用方法和最佳实践">
    <!-- 
        当页面被分享到Facebook、Twitter等平台时，
        这些标签决定了显示的标题、图片和描述等内容
    -->

    <!-- Twitter特定元标签：优化Twitter平台分享显示 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="HTML元数据标签示例">
    <meta name="twitter:description" content="学习HTML元数据标签的使用方法和最佳实践">
    <meta name="twitter:image" content="https://picsum.photos/400/300?random=2">

    <meta name="theme-color" content="#4285f4">
    <!-- 
        theme-color元标签定义了浏览器工具栏的颜色，
        主要用于移动设备和某些桌面浏览器
    -->

    <meta name="application-name" content="元标签演示">
    <!-- 
        application-name元标签用于指定Web应用的名称，
        当网站被安装为应用时可能会用到
    -->

    <title>HTML元数据标签示例</title>
</head>
<body>
    <h1>HTML元数据标签示例</h1>
    <p>查看页面的head部分源代码，了解各种meta标签的用法和作用。</p>
    <p>这些元数据标签不会直接显示在页面上，但对浏览器、搜索引擎和其他服务非常重要。</p>
</body>
</html>